<template>
	<view>
		<view class="gui-form gui-margin-top gui-padding">
			<form @submit="submit">
			<view class="gui-form-item gui-border-b" style="height: 200rpx;">
				<text class="gui-form-label">图片 : </text>
				<view class="gui-form-body">
					<image class="gui-form-image ucenter-face-image" :src="img" mode=""></image>
				</view>
					<view class="gui-bg-gray gui-text-center" style="padding:25rpx;" @tap="chooseImg">
						<text class="gui-text-small gui-color-blue">选择文件</text>
					</view>
			</view>
			
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">名称 : </text>
				<view class="gui-form-body">
					<input :value="formData.book_name" type="text" class="gui-form-input" name="book_name" placeholder="书籍名称" />
				</view>
			</view>
			
			<!-- <view class="gui-form-item gui-border-b">
				<text class="gui-form-label">原价 : </text>
				<view class="gui-form-body">
					<input :value="formData.price" type="text" class="gui-form-input" name="price" placeholder="图书原价(非上架金额)" />
				</view>
			</view> -->
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">分类</text>
				<view class="gui-form-body">
					<picker mode="selector" :range="gender" @change="pickerChange">
						<view class="gui-flex gui-rows gui-nowrap gui-space-between gui-align-items-center">
							<text class="gui-text">{{gender[genderIndex]}}</text>
							<text class="gui-form-icon gui-icons gui-text-center gui-color-gray">&#xe603;</text>
						</view>
					</picker>
				</view>
			</view>
			
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">原价 : </text>
				<view class="gui-form-body">
					<input :value="formData.priceMarket" type="digit" class="gui-form-input" name="priceMarket" placeholder="图书原价(非上架金额)" />
				</view>
			</view>
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">介绍 : </text>
				<view class="gui-form-body">
					<!-- <textarea :value="formData.introduce" type="text" class="gui-form-input" name="introduce" placeholder="介绍" /> -->
					<textarea :value="formData.introduce" name='introduce' class="gui-textarea gui-bg-gray gui-border-box" style="border: #d9d9d9 solid 1rpx;" placeholder="介绍" />
				</view>
			</view>
			
			<view class="gui-form-item gui-border-b">
				<text class="gui-form-label">留言 : </text>
				<view class="gui-form-body">
					<textarea :value="formData.content" name='content' class="gui-textarea gui-bg-gray gui-border-box" style="border: #d9d9d9 solid 1rpx;" placeholder="留言" />
					<!-- <input :value="formData.content" type="text" class="gui-form-input" name="introduce" placeholder="介绍" /> -->
				</view>
			</view>
			
			<view hover-class="gui-tap">
				<button type="primary" formType="submit">
					<text class="gui-text-center gui-block-text gui-icons logoff gui-color-white">&#xe60f; 修改</text>
				</button>
			</view>
			
			</form>
		</view>
		
	</view>
</template>
<script>
export default {
	data() {
		return {
			user:[],
			formData:{},
			img:"",
			gender : ['请选择分类', '名著', '画册','其他'],
			genderIndex : 0,
			up_res:{
				'img':''
			},
			good_id:0,
		}
	},
	onLoad(option) {
		this.user=uni.getStorageSync("user");
		//console.log(this.user,'user');
		this.good_id = option.good_id;
		
		if(!this.user){
			uni.reLaunch({
				url:"../login/login"
			});
		}else{
			// this.showData();
		}
		
	},
	onReady() {
		this.showData(this.good_id);
	},
	methods: {
		// picker 切换
		pickerChange : function (e) {
			console.log(e);
			this.genderIndex    = e.detail.value;
			this.formData.name4 = this.gender[this.genderIndex];
		},
		showData(good_id){
			let self = this;
			console.log(good_id);
			if(good_id){
				// this.$refs.guipageloading.open();
				// 加载产品数据
				this.grace.post(this.apiUrl+"/shared_book/get_book",{b_id:this.good_id},function(res){
						// self.product = res.data;
						// self.product.content = self.adjustRichTextImageSize(self.product.content);
						// self.swiperItems[0].img = res.data.img;
						// self.$refs.guipageloading.close();
						if(res.code == 200){
							self.formData = res.data;
							self.img = res.data.img;
							for(let i=0;i<self.gender.length;i++){
								if(res.data.category == self.gender[i]){
									self.genderIndex = i;
									return 0;
								}
							}
						}else{
							uni.showToast({icon:'error',title:res.data});
						}
						console.log(res,'show');
				});
			}else{
				uni.showToast({
					icon:'error',title:'数据错误!!'
				});
			}
		},
		submit(e){
			console.log(e.detail.value);
			let input_data = e.detail.value;
			input_data['img'] = this.img;
			let self = this;
			
			if(input_data['img'] == ''){
				uni.showToast({ icon:"none", title:"未上传图片" });
			}else if(this.up_res.img == input_data['img']){
				uni.showToast({ icon:"none", title:"请勿重复上传" });
			}else if(this.genderIndex == 0){
				uni.showToast({ icon:"none", title:"未选择分类!!" });
			}else if(input_data['book_name'] == ''){
				uni.showToast({ icon:"none", title:"未输入 书名!!" });
			}else if(input_data['priceMarket'] == ''){
				uni.showToast({ icon:"none", title:"未输入 书籍原价!!" });
			}else{
				let dift_price = self.drift_price(input_data['priceMarket']);
				if(dift_price == '0'){
					uni.showToast({icon:'error',title:'金额错误!!'});
					return 0;
				}
				
				input_data['category'] = this.gender[this.genderIndex];
				input_data['user_id'] = self.user.id;
				input_data['price'] = dift_price;
				input_data['id'] = self.good_id;
				console.log(input_data,'input_data');
				self.grace.post(self.apiUrl+"/shared_book/update_book",{data:input_data},function(res){
					console.log(res,'up_coupon');
					if(res.code == 200){
						// uni.showToast({icon:'success',title:'上传成功!!'});
						self.up_res = res.data;
						//模态框提示
						uni.showModal({
							title: '提示信息',
							content: '修改成功',
							cancelText: '返回',
							confirmText: '确定',
							success: function (res) {
								if (res.confirm) {
									uni.reLaunch({
										url:'./my_book'
									});
								} else if (res.cancel) {
									uni.reLaunch({
										url:'./my_book'
									});
								}
							}
						});
					}else{
						uni.showToast({icon:'error',title:res.data});
					}
					// self.formData = {code:"",content:"",price:"",priceMarket:"",name:""};
					// self.img = "";
					// uni.showToast({ icon:"none", title:res.msg });
				});
			}
			
		},
		chooseImg(){
			let self = this;
			uni.chooseImage({
			    success: (chooseImageRes) => {
			        const tempFilePaths = chooseImageRes.tempFilePaths;
			        uni.uploadFile({
			            url: self.apiUrl+"/public/upload_aliyun_oss",
			            filePath: tempFilePaths[0],
			            name: 'file',
			            success: (uploadFileRes) => {
							let cc = uploadFileRes.data.replace(/\s+/g,"");
							let res = JSON.parse(cc);
							self.img = res.data.url;
			                console.log(self.img,'upload_url');
			            }
			        });
			    }
			});
		},
		drift_price(price){
			if(price < 0){
				return 0;
			}
			let price_p = parseFloat(price) * 0.03;
			if(price_p < 0.5 && price_p > 0){
				return 5;
			}
			let number = Math.round(price_p);
			return number * 10;
		}
	}
}
</script>
<style>
.ucenter-face{width:100rpx; height:100rpx;}
.ucenter-face-image{width:100rpx; height:100rpx;}
.ucenter-line{height:20rpx; background-color:#F6F7F8; margin:16rpx 0;}
.logoff{line-height:88rpx; font-size:28rpx;}
.gui-list-title-text{line-height:60rpx;}
</style>